<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-24 11:10:31
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-24 11:14:40
 * @FilePath: \ProtocolTool\src\renderer\src\components\TestStatus\index.vue
-->
<script lang="ts" setup>
defineProps({
  status: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div v-if="!status" class="status blocked">
    <svg width="16px" height="16px" viewBox="0 0 16 16">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval-2" fill="#FFFFFF" cx="8" cy="8" r="8"></circle>
        <rect id="Rectangle-37" fill="#6D7694" x="4" y="7" width="8" height="2" rx="1"></rect>
      </g>
    </svg>
    <span style="margin-left: 8px">未完成</span>
  </div>
  <div v-if="status === 'success'" class="status success">
    <svg width="16px" height="16px" viewBox="0 0 16 16">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval-2" fill="#FFFFFF" cx="8" cy="8" r="8"></circle>
        <polygon
          id="Shape"
          fill="#21ca64"
          fill-rule="nonzero"
          points="12.2666667 6.57777778 11.0222222 5.33333333 7.46666667 8.88888889 5.68888889 7.11111111 4.44444444 8.35555556 7.46666667 11.3777778"
        ></polygon>
      </g>
    </svg>
    <span style="margin-left: 8px">已通过</span>
  </div>
  <div v-if="status === 'fail'" class="status fail">
    <svg width="16px" height="16px" viewBox="0 0 16 16">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval-2" fill="#FFFFFF" cx="8" cy="8" r="8"></circle>
        <polygon
          id="Shape"
          fill="#FA5B45"
          fill-rule="nonzero"
          points="9.86666667 4.88888889 8 6.75555556 6.13333333 4.88888889 4.88888889 6.13333333 6.75555556 8 4.88888889 9.86666667 6.13333333 11.1111111 8 9.24444444 9.86666667 11.1111111 11.1111111 9.86666667 9.24444444 8 11.1111111 6.13333333"
        ></polygon>
      </g>
    </svg>
    <span style="margin-left: 8px">未通过</span>
  </div>
</template>

<style lang="less" scoped>
.status {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 0;
  overflow: hidden;
  outline: none;
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 3px;
  transition: all 0.2s linear;
  touch-action: manipulation;
  text-decoration: none;
  color: #fff;
}

.success {
  border-color: #21ca64;
  background-color: #21ca64;
}

.fail {
  border-color: #fa5b45;
  background-color: #fa5b45;
}

.blocked {
  border-color: #6d7694;
  background-color: #6d7694;
}
</style>
